<script setup>
import CustomStep from '@/components/customStep';
import { getCurrentInstance, ref } from 'vue';
import FormatLayout from '@/components/formatLayout/formatLayout.vue';
import { useUploadFile } from '@/mixins/uploadFile.js';
import { getTplByTagAndName } from '@/api/tpl.js';
import FormatPreview from '@/components/formatPreview/formatPreview.vue';

const instance = getCurrentInstance();
const { $message } = instance.appContext.config.globalProperties;

// 步骤条交互
const stepData = [
  { label: '上传文档', value: '1' },
  { label: '选择期刊', value: '2' },
  { label: '生成格式', value: '3' },
];
const {
  activeLine,
  activeStep,
  fileName,
  uploadSuccess,
  wordUpload,
  cleanWord,
  showPreviewDialog,
  previewData,
  previewClick,
  formatHandle,
  lookHandle,
  uploadJumpHandle,
  goLastStep,
} = useUploadFile();
// 第一步选择期刊按钮点击
async function chooseSchool() {
  await searchPeriodical();
  activeStep.value = 1;
  activeLine.value = 0;
}

/**
 * @desc 第二步选择期刊
 */
const periodical = ref(''); // 期刊名称
const moduleList = ref([]); // 模版列表
// 查询期刊
async function searchPeriodical() {
  const returnData = await getTplByTagAndName({
    tag: '期刊',
    content: periodical.value,
    code: 'qklw',
  });
  if (returnData?.code === 200) {
    moduleList.value = returnData.data;
    moduleList.value.forEach((item) => {
      item.showMask = false; // 初始化遮罩层
    });
    console.log(returnData);
  } else {
    $message.error(returnData?.msg);
  }
}
</script>

<template>
  <FormatLayout title="期刊论文排版" class="format-paper-box">
    <template #leftContent>
      <div class="go-back-btn" @click="goLastStep" v-show="activeStep === 1">返回上一步</div>
    </template>
    <div class="step-box">
      <CustomStep :active-step="activeStep" :step-data="stepData" :active-line="activeLine" />
    </div>
    <!--上传文件-->
    <template v-if="activeStep === 0">
      <div class="first-step">
        <el-upload
          accept=".doc, .docx"
          :http-request="wordUpload"
          :show-file-list="false"
          :limit="1"
          drag
          class="img-upload"
        >
          <img class="upload-icon" src="@/assets/images/formatPaper/upload-icon.png" alt="" />
        </el-upload>
        <template v-if="!uploadSuccess">
          <div class="hint-box">提示：目前只支持word文档上传，大小不超过5M</div>
          <el-upload
            accept=".doc, .docx"
            :http-request="wordUpload"
            :show-file-list="false"
            :limit="1"
          >
            <div class="upload-btn">立即上传</div>
          </el-upload>
        </template>
        <template v-else>
          <div class="file-list">
            <div class="upload-success-box">
              <el-icon><CircleCheckFilled /></el-icon><span>上传成功</span>
            </div>
            <div class="file-name-box">
              <div class="file-name">{{ fileName }}</div>
              <div class="close-icon-box">
                <el-icon @click="cleanWord"><CircleCloseFilled /> </el-icon>
              </div>
            </div>
            <div class="choose-school" @click="chooseSchool">选择期刊</div>
          </div>
        </template>
      </div>
    </template>
    <!--选择期刊-->
    <template v-else-if="activeStep === 1">
      <el-input placeholder="请输入目标期刊名称" v-model="periodical" class="school-input">
        <template #append>
          <el-button type="primary" class="school-sure" @click="searchPeriodical">确定</el-button>
        </template>
      </el-input>
      <!--期刊列表-->
      <div class="periodical-list">
        <div class="title-box">
          <div class="left-line"></div>
          <div class="center-content">推荐期刊</div>
          <div class="right-line"></div>
        </div>
        <div class="module-list-box" v-show="moduleList?.length">
          <template v-for="(item, index) in moduleList" :key="index">
            <div class="each-module">
              <div
                class="img-box"
                @mouseenter="item.showMask = true"
                @mouseleave="item.showMask = false"
              >
                <img :src="item.qkLwImage" alt="图片缺失" />
                <div class="mack-box" v-show="item.showMask">
                  <div class="format-set set-box" @click="formatHandle(item)">格式生成</div>
                  <div class="module-view set-box" @click="previewClick(item)">预览</div>
                </div>
              </div>
              <div class="module-name" :title="item.qkLwName">
                {{ item.qkLwName || '文字缺失' }}
              </div>
            </div>
          </template>
        </div>
        <div class="empty-hint" v-show="!moduleList?.length">
          暂未检测到{{ periodical || '当前类型' }}模版，
          <span @click="uploadJumpHandle">请上传</span>
          ，或到个人中心进行上传
        </div>
      </div>
    </template>
    <!--生成格式-->
    <template v-if="activeStep === 2">
      <div class="create-icon">
        <img src="@/assets/images/formatPaper/lookFormat.png" alt="" />
      </div>
      <div class="look-success">
        <img src="@/assets/images/formatPaper/lookSuccess.png" alt="" />
      </div>
      <div class="download-btn" @click="lookHandle">立即查看</div>
    </template>
  </FormatLayout>
  <FormatPreview
    v-if="showPreviewDialog"
    :data="previewData"
    type="periodical"
    @close="showPreviewDialog = false"
    @format-set="(item) => formatHandle(item)"
  />
</template>

<style scoped lang="less">
@import '@/styles/formatCommon.less';
@import '@/views/formatPaper/formatPaper.less';
@import './formatPeriodical.less';
</style>
